<template>
  <div class="temChangeTree">
    <div class="el-col el-col-8 temChangeTree" v-loading="loading">
      <div slot="header" class="clearfix tree-title">
        <span class="span-title">业务分类</span>
        <div style="float: right">
          <el-button class="size menuChangeCss" size="small" @click="addParent()"  title="添加一级分类" icon="el-icon-plus" circle></el-button>
          <div class="clearfix"></div>
        </div>
      </div>
      <div class="tree-detail">
        <div class="block">
          <el-tree
            :data="treeData"
            :props="defaultProps"
            @node-expand="expand"
            @node-collapse="collapse"
            @current-change="handleCurrentChange"
            :default-expanded-keys="defaultExpandedKeys"
            :highlight-current="true"
            node-key="id"
            class="nodes-tree"
            :expand-on-click-node="false">
            <span class="custom-tree-node" slot-scope="{ node, data }" @mouseleave= mouseleaveTree(data,$event) @mouseover=mouseoverTree(data,$event)>
              <span :title="data.name" class="treeSize">{{ data.name }}</span>
              <div style="display: inline-block;margin-left: 16px;" class="treeNone">
                <span class="addIcon_tree treeIconFun" @click="addRecord(data)"></span>
                <span class="editIcon_tree treeIconFun" @click="editRecord(data)"></span>
                <span class="deleteIcon_tree treeIconFun" @click="deleteRecord(data)" v-if="data.children.length == 0"></span>
              </div>
            </span>
          </el-tree>
        </div>
      </div>

      <el-dialog
        :title="busiTypeDialog.dialogTitle"
        :visible.sync="busiTypeDialog.isDisplay"
        :close-on-click-modal="false"
        :destroy-on-close="true"
        top="30px"
        custom-class="myDialog"
        v-if="busiTypeDialog.isDisplay" >
        <tpl-busi-type-detail :componentCustomProps="busiTypeDialog.componentCustomProps" @closeDialog="closeDialog"></tpl-busi-type-detail>
      </el-dialog>
    </div>
    <div class="el-col el-col-16">
      <tpl-busi-type-view :componentCustomProps="selectNodeId" v-if="selectNodeId && selectNodeId != ''"></tpl-busi-type-view>
    </div>
  </div>

</template>

<script>
  import '@/styles/newstyle.scss'
  import {
    treeSelectBusiType,
    deleteForceBusiType
  } from '@/api/templateManage/TplBusiType.js'
  import tplBusiTypeDetail from './components/tplBusiTypeDetail'
  import tplBusiTypeView from './components/tplBusiTypeView'

  // const store = require('store')

  export default {
    name: 'tplBusiTypeTreeCom',
    data() {
      return {
        loading: false,
        treeData: [],
        defaultExpandedKeys: [],
        defaultProps: {
          children: 'children',
          label: 'title'
        },
        busiTypeDialog: {
          isDisplay: false,
          dialogTitle: '',
          componentCustomProps: {
            editType: '',
            busiTypeId: '',
            busiTypeName: '',
            busiTypeParentId: '',
            busiTypeParentName: ''
          }
        },
        selectNodeId: ''
      }
    },
    props: ['asyncData'],
    created() {
      this.fetchData()
    },
    watch: {
      //
    },
    components: {
      tplBusiTypeDetail,
      tplBusiTypeView
    },
    // 画面刚进入method
    beforeRouteEnter(to, from, next) {
      next(vm => {
        // 通过 `vm` 访问组件实例
        vm.fetchData()
      })
    },
    mounted() {
      // this.handleReset()
    },
    methods: {
      mouseleaveTree(data, $event) {
        $event.currentTarget.firstElementChild.nextElementSibling.setAttribute('class', 'nodeClass treeNone')
      },
      mouseoverTree(data, $event) {
        $event.currentTarget.firstElementChild.nextElementSibling.setAttribute('class', 'nodeClass zteeBlock')
      },
      fetchData() {
        this.loading = true
        treeSelectBusiType({}).then(res => {
          this.treeData = res.data.data
          this.loading = false
          this.setDefaultExpandedKeys(res.data.data)
        }).catch((err) => {
          this.loading = false
          console.log(err)
        })
      },
      addParent() {
        this.resetRecord()
        this.busiTypeDialog.dialogTitle = '业务类型新增'
        this.busiTypeDialog.componentCustomProps.editType = 'add'
        this.busiTypeDialog.componentCustomProps.busiTypeParentId = '****'
        this.busiTypeDialog.componentCustomProps.busiTypeParentName = '顶级类型'
        this.busiTypeDialog.isDisplay = true
      },
      addRecord(record) {
        this.resetRecord()
        this.busiTypeDialog.dialogTitle = '业务类型新增'
        this.busiTypeDialog.componentCustomProps.editType = 'add'
        this.busiTypeDialog.componentCustomProps.busiTypeParentId = record.data_id
        this.busiTypeDialog.componentCustomProps.busiTypeParentName = record.name
        this.busiTypeDialog.isDisplay = true
      },
      editRecord(record, node) {
        this.resetRecord()
        this.busiTypeDialog.dialogTitle = '业务类型编辑'
        this.busiTypeDialog.componentCustomProps.editType = 'edit'
        this.busiTypeDialog.componentCustomProps.busiTypeId = record.data_id

        if (record.data_parent_id === '****') {
          this.busiTypeDialog.componentCustomProps.busiTypeParentName = '顶级类型'
        } else {
          let parentNode = node.parent
          if (parentNode && parentNode.data) {
            this.busiTypeDialog.componentCustomProps.busiTypeParentName = parentNode.data.name
          }
        }
        this.busiTypeDialog.isDisplay = true
      },
      deleteRecord(record) {
        this.$confirm('是否删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          let args = {}
          args.busiTypeId = record.data_id
          deleteForceBusiType(args).then(res => {
            if (res.data.success) {
              this.$message({
                type: 'success',
                message: '操作成功！'
              })
              this.fetchData()
            } else {
              this.$message({
                type: 'error',
                message: '操作失败！'
              })
            }
          }).catch((err) => {
            console.log(err)
            this.$message({
              type: 'warning',
              message: '删除异常！'
            })
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      expand(data) {
        //
      },
      collapse() {
        //
      },
      setDefaultExpandedKeys(data) {
        //
        if (data && data.length > 0) {
          let keys = []
          data.forEach((item, index) => {
            keys.push(item.id)
          })
          this.defaultExpandedKeys = keys
        }
      },
      closeDialog(type) {
        if (type === 1) { // 保存更新后
          this.fetchData()
        }
        this.busiTypeDialog.isDisplay = false
      },
      resetRecord() {
        this.busiTypeDialog.isDisplay = false
        this.busiTypeDialog.dialogTitle = ''
        this.busiTypeDialog.componentCustomProps.editType = ''
        this.busiTypeDialog.componentCustomProps.busiTypeId = ''
        this.busiTypeDialog.componentCustomProps.busiTypeName = ''
        this.busiTypeDialog.componentCustomProps.busiTypeParentId = ''
        this.busiTypeDialog.componentCustomProps.busiTypeParentName = ''
      },
      handleCurrentChange(data, node) {
        //
        this.selectNodeId = data.data_id
      }
    }
  }
</script>
<style scoped>
  .custom-tree-node{
    line-height: 40px;
  }
  .nodeClass{
    transition: all .3s;
  }
  .treeNone{
    opacity: 0 !important;
  }
  .zteeBlock{
    opacity: 1 !important;
  }
  .tree-title{
    font-size: 16px;
    padding:10px 10px 10px 20px;
    border-bottom: 1px solid#ccc;
  }
  .size{
    padding:6px;
  }
  .tree-detail{
    padding: 10px 0 80px 15px;
  }
  .minSize{
    padding:4px;
  }
  .height100{
    border-right: 1px solid #ccc;
    overflow-y: auto;
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both;
  }
  .custom-tree-node{
    line-height: 40px;
    display: flex;
  }
  .span-title{
    float: left;
    line-height: 16px;
    border-left:4px solid #000;
    padding-left: 10px;
    font-size: 16px;
    margin-top: 7px;
  }
</style>
